<template>
  <u-popup v-model="popupShow" @close="handleClose" closeable close-icon-color="#ffffff" :custom-style="{background:'transparent'}" mode="center" border-radius="28">
    <view class="content">
      <view class="popupContent">
        <image class="bgImg" :src="bgImg"></image>
        <view class="main">{{content}}</view>
        <view class="toBtn" @click="handleToTarget">{{btnText}}</view>
      </view>
    </view>
  </u-popup>
</template>
<script>
export default {
  props: {
    content: {
      type: String,
      default: '全面提升用户视觉体验，打造优质行业数字人，快速定位你所选的职业，快来体验吧！'
    },
    btnText: {
      type: String,
      default: '去看看'
    },
    targetUrl: {
      type: String,
      default: '/pages/career/positionDictionary/allCategory',
    }
  },
  data() {
    return {
      popupShow: false,
      bgImg: this.$imgBaseSelf + "common/publicTip.png",
      closeImg: this.$imgBaseSelf + "common/guanbi.png",
      isPublishFirst: '',
      publishTime: new Date('2023-05-27').getTime(),
    }
  },
  created() {
    this.isPublishFirst = uni.getStorageSync("isPublishFirst") || '';
    let currentTime = new Date().getTime();
    // 当前时间超过发版时间3天后不弹出
    if (!this.isPublishFirst && currentTime < (this.publishTime + 3 * 24 * 3600 * 1000)) {
      this.init();
      uni.setStorageSync("isPublishFirst", true);
    }
  },
  methods: {
    init() {
      this.popupShow = true;
    },
    handleClose() {
    },
    handleToTarget() {
      this.popupShow = false;
      uni.navigateTo({
        url: this.targetUrl,
      });
    }
  },
}
</script>
<style lang="scss" scoped>
.content {
  width: 590rpx;
  background: transparent;
}
.popupContent {
  width: 100%;
  padding-bottom: 52rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  .bgImg {
    width: 100%;
    height: 208rpx;
  }
  .main {
    width: 100%;
    min-height: 50rpx;
    font-size: 28rpx;
    color: #555555;
    line-height: 44rpx;
    padding: 42rpx 74rpx;
  }
  .toBtn {
    width: 442rpx;
    height: 72rpx;
    background: #1384fa;
    border-radius: 46rpx;
    line-height: 72rpx;
    text-align: center;
    font-size: 28rpx;
    color: #ffffff;
  }
}
</style>